<template>
  <div id="iDefined">
    <m-header :systemName="systemName"
              :activeName="activeName"
              :isSelect="false"
              :is-back="false"
              @onSelectMenu="onSelectMenu">
    </m-header >
    <div class="idefinded-main">
      <div class="main-head">
        <span class="divtime">
          <DatePicker :clearable="false" type="daterange" :value="initDate" @on-change="dateChange" placement="bottom-end" placeholder="请选择日期" style="width: 260px"></DatePicker>
        </span>
        <span class="switch-single">
          <RadioGroup v-model="checkName" @on-change="changeRadio">
            <Radio :label="name" v-for="(name, index) in ['总量', '单车']" :key="index"></Radio>
          </RadioGroup>
        </span>
        <RadioGroup v-model="type" type="button" @on-change="radioChange">
          <Radio :label="name" v-for="(name, index) in typeList" :key="index"></Radio>
        </RadioGroup>
      </div>
      <div class="main-center">
        <div class="chart-card">
          <div class="char-top clearfix">
            <span class="char-title">工厂趋势对比图</span>
          </div>
          <div id="factoryChart" ref="factoryChart"></div>
        </div>
        <div class="chart-card">
          <div class="char-top clearfix">
            <span class="char-title">车间趋势对比图</span>
            <div class="radio-list">
              <Radio-group v-model="selectWorkName" type="button" @on-change="tapWorkshop">
                <Radio :label="name" v-for="(name, index) in workshopTypeList" :key="index">{{name}}</Radio>
              </Radio-group>
            </div>
          </div>
          <div id="workShopChart" ref="workShopChart"></div>
        </div>
      </div>
      <div class="main-bottom">
        <div class="left-wapper">
          <div class="select-workspace condition-form">
            空间选择 :
            <Tooltip :content="workSpaceTip" placement="top">
              <Cascader :data="workSpaceData" v-model="spaceValue" change-on-select
                        clearable
                        @on-change="changeWorkSpace"
                        @on-visible-change="visibleChange"
                        style="width: 350px;"></Cascader>
            </Tooltip>
          </div>
          <div class="select-history">
            <ul class="select-history-text">
              <li v-for="(item, index) in compareData" :key="index">
                <span>{{item.name}}</span>
                <Icon type="ios-close" @click="delClick(item, index)" style="cursor: pointer"/>
              </li>
            </ul>
            <div class="select-history-btn" v-show="compareData.length > 0">
              <Button type="warning" style="margin-right: 20px" @click="resetCompareData">重 置</Button>
              <Button type="primary" @click="queryCompareData">统 计</Button>
            </div>
          </div>
        </div>
        <div class="right-chart">
          <div id="idefined-card" ref="compare"></div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import MHeader from '../../components/common/mHeader'
  import mDate from '../../components/common/mDate'
  // import {mapState, mapActions} from 'vuex'
  export default {
    name: 'userDefined',
    props: {},
    data () {
      return {
        systemName: '智慧能耗管理系统',
        activeName: 'energyOverview',
        type: '碳排',
        typeList: ['碳排', '成本', '电', '水', '燃气', '蒸汽', '冷量', '压缩空气'],
        isCheck: false,
        checkName: '总量',
        factoryTypeList: ['HD1', 'HD2', 'ZZ', 'DL', 'XY'],
        selectWorkName: '冲压车间',
        workshopTypeList: ['冲压车间', '焊装车间', '涂装车间', '总装车间', '树脂车间'],
        // factChartData: [['2000-06-05', 116], ['2000-06-06', 129], ['2000-06-07', 135], ['2000-06-08', 86], ['2000-06-09', 73], ['2000-06-10', 85], ['2000-06-11', 73], ['2000-06-12', 68], ['2000-06-13', 92], ['2000-06-14', 130], ['2000-06-15', 245], ['2000-06-16', 139], ['2000-06-17', 115], ['2000-06-18', 111], ['2000-06-19', 309], ['2000-06-20', 206], ['2000-06-21', 137], ['2000-06-22', 128], ['2000-06-23', 85], ['2000-06-24', 94], ['2000-06-25', 71], ['2000-06-26', 106], ['2000-06-27', 84], ['2000-06-28', 93], ['2000-06-29', 85], ['2000-06-30', 73], ['2000-07-01', 83], ['2000-07-02', 125], ['2000-07-03', 107], ['2000-07-04', 82], ['2000-07-05', 44], ['2000-07-06', 72], ['2000-07-07', 106], ['2000-07-08', 107], ['2000-07-09', 66], ['2000-07-10', 91], ['2000-07-11', 92], ['2000-07-12', 113], ['2000-07-13', 107], ['2000-07-14', 131], ['2000-07-15', 111], ['2000-07-16', 64], ['2000-07-17', 69], ['2000-07-18', 88], ['2000-07-19', 77], ['2000-07-20', 83], ['2000-07-21', 111], ['2000-07-22', 57], ['2000-07-23', 55], ['2000-07-24', 60], ['2000-07-25', 44], ['2000-07-26', 127], ['2000-07-27', 114], ['2000-07-28', 86]],
        // workChartData: [['2000-06-05', 116], ['2000-06-06', 129], ['2000-06-07', 135], ['2000-06-08', 86], ['2000-06-09', 73], ['2000-06-10', 85], ['2000-06-11', 73], ['2000-06-12', 68], ['2000-06-13', 92], ['2000-06-14', 130], ['2000-06-15', 245], ['2000-06-16', 139], ['2000-06-17', 115], ['2000-06-18', 111], ['2000-06-19', 309], ['2000-06-20', 206], ['2000-06-21', 137], ['2000-06-22', 128], ['2000-06-23', 85], ['2000-06-24', 94], ['2000-06-25', 71], ['2000-06-26', 106], ['2000-06-27', 84], ['2000-06-28', 93], ['2000-06-29', 85], ['2000-06-30', 73], ['2000-07-01', 83], ['2000-07-02', 125], ['2000-07-03', 107], ['2000-07-04', 82], ['2000-07-05', 44], ['2000-07-06', 72], ['2000-07-07', 106], ['2000-07-08', 107], ['2000-07-09', 66], ['2000-07-10', 91], ['2000-07-11', 92], ['2000-07-12', 113], ['2000-07-13', 107], ['2000-07-14', 131], ['2000-07-15', 111], ['2000-07-16', 64], ['2000-07-17', 69], ['2000-07-18', 88], ['2000-07-19', 77], ['2000-07-20', 83], ['2000-07-21', 111], ['2000-07-22', 57], ['2000-07-23', 55], ['2000-07-24', 60], ['2000-07-25', 44], ['2000-07-26', 127], ['2000-07-27', 114], ['2000-07-28', 86]],
        // 空间选择 和自定义对比, 整体布局  在 下面
        workSpaceData: [],
        workSpace: '',
        // 选中的 值的 集合
        spaceValue: [],
        // 待比较的 对象的 数组集合
        compareData: [],
        // 需要的 childObj 对象
        childObj: {},
        // tip 显示的 文本
        workSpaceTip: '',
        // 自定义对比 的图形 假数据
        // compareEchartsData: [['2000-06-05', 116], ['2000-06-06', 129], ['2000-06-07', 135], ['2000-06-08', 86], ['2000-06-09', 73], ['2000-06-10', 85], ['2000-06-11', 73], ['2000-06-12', 68], ['2000-06-13', 92], ['2000-06-14', 130], ['2000-06-15', 245], ['2000-06-16', 139], ['2000-06-17', 115], ['2000-06-18', 111], ['2000-06-19', 309], ['2000-06-20', 206], ['2000-06-21', 137], ['2000-06-22', 128], ['2000-06-23', 85], ['2000-06-24', 94], ['2000-06-25', 71], ['2000-06-26', 106], ['2000-06-27', 84], ['2000-06-28', 93], ['2000-06-29', 85], ['2000-06-30', 73], ['2000-07-01', 83], ['2000-07-02', 125], ['2000-07-03', 107], ['2000-07-04', 82], ['2000-07-05', 44], ['2000-07-06', 72], ['2000-07-07', 106], ['2000-07-08', 107], ['2000-07-09', 66], ['2000-07-10', 91], ['2000-07-11', 92], ['2000-07-12', 113], ['2000-07-13', 107], ['2000-07-14', 131], ['2000-07-15', 111], ['2000-07-16', 64], ['2000-07-17', 69], ['2000-07-18', 88], ['2000-07-19', 77], ['2000-07-20', 83], ['2000-07-21', 111], ['2000-07-22', 57], ['2000-07-23', 55], ['2000-07-24', 60], ['2000-07-25', 44], ['2000-07-26', 127], ['2000-07-27', 114], ['2000-07-28', 86]],
        initDate: [new Date().format('yyyy-MM-dd'), new Date().format('yyyy-MM-dd')]
        // end
      }
    },

    created () {
    },
    watch: {
      // '$route': 'activePath'
    },
    mounted () {
      // this.activeName = this.$route.name
      // 空间选择 的 接口 (碳排,电,水等等)
      this.ensTree({type: this.type, factory: 'ZZ'})
      this.refChartData()
    },
    computed: {},
    methods: {
      refChartData () {
        this.getFactoryData()
        this.getWorkshopData()
      },
      // 日期改变的 方法
      dateChange (val) {
        this.initDate = val
        if (this.compareData.length > 0) {
          this.commonQueryCompareData()
        }
        this.refChartData()
      },
      // 自定义 对比的 公共方法
      _getComparisonData (url, data = {}) {
        return window.myapi.getComparisonData(url, data).then(function (res) {
          if (res.status === 200) {
            return res.data.data
          } else {
            self.$Message.error('请求数据失败!')
          }
        }).catch(function (e) {
          self.$Message.error('请求数据失败!')
        })
      },
      // 自定义对比 echarts 图
      compareEcharts (data) {
        let dom = this.$refs.compare
        let myChart = echarts.init(dom)
        let option = {
          title: {
            text: '自定义走势对比',
            textStyle: {
              color: 'rgba(125, 161, 255, .7)',
              fontSize: '20',
              fontWeight: 'normal'
            },
            padding: [20, 14]
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            // axisTick: {
            //   length: 10,
            //   alignWithLabel: true,
            //   lineStyle: {
            //     color: '#8C99B6'
            //   }
            // },
            axisLabel: {
              color: '#fff'
              // margin: 20
              // formatter: (value, index) => {
              //   console.log(index)
              // }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#8C99B6'
              }
            },
            data: data[0].data.map(function (item) {
              return item[0]
            })
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisLabel: {
              inside: false,
              margin: 15,
              show: true,
              color: '#fff'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#8C99B6'
              }
            }
          },
          // toolbox: {
          //   left: 'center',
          //   feature: {
          //     dataZoom: {
          //       yAxisIndex: 'none'
          //     },
          //     restore: {},
          //     saveAsImage: {}
          //   }
          // },
          dataZoom: [{
            textStyle: {
              color: '#fff'
            }
          }, {
            type: 'inside'
          }],
          // visualMap: {
          //   textStyle: {
          //     color: 'rgba(125, 161, 255, .7)'
          //   },
          //   top: 10,
          //   right: 10,
          //   pieces: [{
          //     gt: 0,
          //     lte: 50,
          //     color: '#096'
          //   }, {
          //     gt: 50,
          //     lte: 100,
          //     color: '#ffde33'
          //   }, {
          //     gt: 100,
          //     lte: 150,
          //     color: '#ff9933'
          //   }, {
          //     gt: 150,
          //     lte: 200,
          //     color: '#cc0033'
          //   }, {
          //     gt: 200,
          //     lte: 300,
          //     color: '#660099'
          //   }, {
          //     gt: 300,
          //     color: '#7e0023'
          //   }],
          //   outOfRange: {
          //     color: '#999'
          //   }
          // },
          // series: {
          //   name: 'Beijing AQI',
          //   type: 'line',
          //   data: this.compareEchartsData.map(function (item) {
          //     return item[1]
          //   }),
          //   markLine: {
          //     silent: true,
          //     data: [{
          //       yAxis: 50
          //     }, {
          //       yAxis: 100
          //     }, {
          //       yAxis: 150
          //     }, {
          //       yAxis: 200
          //     }, {
          //       yAxis: 300
          //     }]
          //   }
          // }
          series: data.map(item => {
            let obj = {
              name: item.name,
              type: 'line',
              data: item.data.map(function (item) {
                return item[1]
              }),
              // markLine: {
              //   silent: true,
              //   data: [{
              //     yAxis: 50
              //   }, {
              //     yAxis: 100
              //   }, {
              //     yAxis: 150
              //   }, {
              //     yAxis: 200
              //   }, {
              //     yAxis: 300
              //   }]
              // }
            }
            return obj
          })
        }
        if (option && typeof option === 'object') {
          myChart.setOption(option, true)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        }
      },
      // 空间选择 隐藏时候 触发的函数
      visibleChange (flag) {
        if (!flag) {
          if (Object.keys(this.childObj).length === 0) {
            return false
          }
          if (this.compareData.length > 0) {
            // 开关设置 懒得封装方法了,  暂时只有一个地方用到
            let s = true
            for (let i = 0, len = this.compareData.length; i < len; i++) {
              // 如果 改变了, id组合 在 数组里 找到 相等了 ,  开关 为 false
              if (this.childObj.id.join('') === this.compareData[i].id.join('')) s = false
            }
            // 遍历结束 没找到 ,  数组 推进这个 对象 obj
            if (s && this.spaceValue.length) this.compareData.push(this.childObj)
          } else {
            this.compareData.push(this.childObj)
          }
        }
      },
      // 改变 空间选择的 方法
      changeWorkSpace (workSpace, selectedData) {
        // console.log(workSpace)
        // console.log(selectedData)
        let str = ''
        for (let i = 0; i < selectedData.length; i++) {
          if (!i) {
            str = selectedData[i].label
          } else {
            str = str + '/' + selectedData[i].label
          }
        }
        this.workSpaceTip = str
        this.childObj = {
          id: workSpace,
          name: str
        }
        // this.workSpaceString = workSpace[workSpace.length - 1]
        // this.workSpaceName = selectedData.map(item => item.label).join('/')
        // 选择完成后的回调，返回值 value 即已选值 workSpace，selectedData 为已选项的具体数据
        this.spaceValue = workSpace
      },
      // 空间选择  树形数据
      ensTree (obj = {}) {
        window.myapi.ensTree(obj).then(res => {
          if (res.data.status === 200) {
            this.workSpaceData = res.data.data
            if (this.workSpaceData.length === 0) {
              this.$Message.info('空间架构无数据，请补充数据')
              return false
            }
          }
        }).catch(function (e) {
          // console.log(e)
        })
      },
      // 重置 对比的 对象数组 和 空间选中的值
      resetCompareData () {
        this.spaceValue = []
        this.compareData = []
        echarts.init(this.$refs.compare).clear()
      },
      // 对比的 方法
      queryCompareData () {
        this.commonQueryCompareData()
      },
      // 公共的 自定义 对比的 请求接口的方法
      async commonQueryCompareData () {
        // let data = null
        let [ startTime, endTime ] = this.initDate
        let target = this.compareData.map(v => v.id[v.id.length - 1])
        let targetName = this.compareData.map(v => v.name)
        let jsonStr = JSON.stringify({
          dataType: this.checkName === '总量' ? 'total' : 'single',
          energy: this.type,
          startTime: startTime,
          endTime: endTime,
          target: target.join(),
          targetName: targetName.join()
        })
        let postData = {
          json: jsonStr
        }
        let data = await this._getComparisonData('customizeComparison', postData).then(res => res)
        // 自定义对比 echarts 图形
        this.compareEcharts(data)
      },
      // 删除 当前选中的 数据
      delClick (item, index) {
        if (item.id.join('') === this.spaceValue.join('')) this.spaceValue = []
        if (this.compareData.length > 1) {
          this.compareData.splice(index, 1)
          this.commonQueryCompareData()
        } else {
          this.compareData.splice(index, 1)
          echarts.init(this.$refs.compare).clear()
        }
      },
      // 子路由 菜单的 点击事件
      onSelectMenu (item) {
        this.activeName = item.name
        this.$router.push({
          name: item.name
        })
      },
      // 总量 和 单车 的选项方法
      changeRadio (name) {
        this.checkName = name
        if (this.compareData.length > 0) {
          this.commonQueryCompareData()
        }
        this.refChartData()
      },
      // 能源种类的 方法 (如 碳排,电,水等等)
      radioChange (name) {
        this.type = name
        this.ensTree({type: this.type, factory: 'ZZ'})
        this.resetCompareData()
        this.refChartData()
      },
      tapWorkshop (name) {
        this.selectWorkName = name
        this.getWorkshopData()
      },
      initFactoryChart (data) {
        let dom = this.$refs.factoryChart
        let myChart = echarts.init(dom)
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            top: '-2px',
            x: '10%',
            inactiveColor: 'rgba(153, 153, 153, 1)',
            textStyle: {
              fontSize: 14, // 字体大小
              color: '#fff' // 字体颜色
            },
            itemGap: 20, // 设置间距
            icon: 'circle',
            data: data.factory
          },
          xAxis: {
            // axisTick: {
            //   length: 10,
            //   alignWithLabel: true,
            //   lineStyle: {
            //     color: '#8C99B6'
            //   }
            // },
            axisLabel: {
              color: '#fff'
              // margin: 20
              // formatter: (value, index) => {
              //   console.log(index)
              // }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#8C99B6'
              }
            },
            data: data.data[0].data.map(function (item) {
              return item[0]
            })
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisLabel: {
              inside: false,
              margin: 15,
              show: true,
              color: '#fff'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#8C99B6'
              }
            }
          },
          toolbox: {
            left: 'center'
          },
          dataZoom: [{
            textStyle: {
              color: '#fff'
            }
          }, {
            type: 'inside'
          }],
          // visualMap: {
          //   textStyle: {
          //     color: 'rgba(125, 161, 255, .7)'
          //   },
          //   top: 10,
          //   right: 10,
          //   pieces: [{
          //     gt: 0,
          //     lte: 50,
          //     color: '#096'
          //   }, {
          //     gt: 50,
          //     lte: 100,
          //     color: '#ffde33'
          //   }, {
          //     gt: 100,
          //     lte: 150,
          //     color: '#ff9933'
          //   }, {
          //     gt: 150,
          //     lte: 200,
          //     color: '#cc0033'
          //   }, {
          //     gt: 200,
          //     lte: 300,
          //     color: '#660099'
          //   }, {
          //     gt: 300,
          //     color: '#7e0023'
          //   }],
          //   outOfRange: {
          //     color: '#999'
          //   }
          // },
          series: data.data.map(item => {
            let obj = {
              name: item.name,
              type: 'line',
              data: item.data.map(function (item) {
                return item[1]
              }),
              // markLine: {
              //   silent: true,
              //   data: [{
              //     yAxis: 50
              //   }, {
              //     yAxis: 100
              //   }, {
              //     yAxis: 150
              //   }, {
              //     yAxis: 200
              //   }, {
              //     yAxis: 300
              //   }]
              // }
            }
            return obj
          })
        }
        if (option && typeof option === 'object') {
          myChart.setOption(option, true)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        }
      },
      initWorkshopChart (data) {
        let dom = this.$refs.workShopChart
        let myChart = echarts.init(dom)
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            inactiveColor: 'rgba(153, 153, 153, 1)',
            x: '10%',
            textStyle: {
              fontSize: 14, // 字体大小
              color: '#fff' // 字体颜色
            },
            itemGap: 20, // 设置间距
            icon: 'stack',
            data: data.factory
          },
          xAxis: {
            // axisTick: {
            //   length: 10,
            //   alignWithLabel: true,
            //   lineStyle: {
            //     color: '#8C99B6'
            //   }
            // },
            axisLabel: {
              color: '#fff'
              // margin: 20
              // formatter: (value, index) => {
              //   console.log(index)
              // }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#8C99B6'
              }
            },
            data: data.data[0].data.map(function (item) {
              return item[0]
            })
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisLabel: {
              inside: false,
              margin: 15,
              show: true,
              color: '#fff'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#8C99B6'
              }
            }
          },
          toolbox: {
            left: 'center'
            // feature: {
            //   dataZoom: {
            //     yAxisIndex: 'none'
            //   },
            // restore: {},
            // saveAsImage: {}
            // }
          },
          dataZoom: [{
            textStyle: {
              color: '#fff'
            }
          }, {
            type: 'inside'
          }],
          // visualMap: {
          //   textStyle: {
          //     color: 'rgba(125, 161, 255, .7)'
          //   },
          //   top: 10,
          //   right: 10,
          //   pieces: [{
          //     gt: 0,
          //     lte: 50,
          //     color: '#096'
          //   }, {
          //     gt: 50,
          //     lte: 100,
          //     color: '#ffde33'
          //   }, {
          //     gt: 100,
          //     lte: 150,
          //     color: '#ff9933'
          //   }, {
          //     gt: 150,
          //     lte: 200,
          //     color: '#cc0033'
          //   }, {
          //     gt: 200,
          //     lte: 300,
          //     color: '#660099'
          //   }, {
          //     gt: 300,
          //     color: '#7e0023'
          //   }],
          //   outOfRange: {
          //     color: '#999'
          //   }
          // },
          series: data.data.map(item => {
            let obj = {
              name: item.name,
              type: 'line',
              data: item.data.map(function (item) {
                return item[1]
              }),
              // markLine: {
              //   silent: true,
              //   data: [{
              //     yAxis: 50
              //   }, {
              //     yAxis: 100
              //   }, {
              //     yAxis: 150
              //   }, {
              //     yAxis: 200
              //   }, {
              //     yAxis: 300
              //   }]
              // }
            }
            return obj
          })
        }
        if (option && typeof option === 'object') {
          myChart.setOption(option, true)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        }
      },
      async getFactoryData () {
        let [ startTime, endTime ] = this.initDate
        let jsonStr = JSON.stringify({
          startTime: startTime,
          endTime: endTime,
          energy: this.type,
          dataType: this.checkName === '总量' ? 'total' : 'single'
        })
        let postData = {
          json: jsonStr
        }
        let chartData = await this._getComparisonData('factoryComparison', postData).then(res => res)
        if (chartData.data.length > 0) {
          // console.log(chartData)
          this.initFactoryChart(chartData)
        } else {
          return false
        }
      },
      async getWorkshopData () {
        let [startTime, endTime] = this.initDate
        let jsonStr = JSON.stringify({
          startTime: startTime,
          endTime: endTime,
          energy: this.type,
          workshop: this.selectWorkName,
          dataType: this.checkName === '总量' ? 'total' : 'single'
        })
        let postData = {
          json: jsonStr
        }
        let chartData = await this._getComparisonData('workshopComparison', postData).then(res => res)
        // let chartData = await this._getComparisonData('workshopComparison', postData).then(res => {
        //   if (res.data[0] !== null) {
        //     return res
        //   }
        // })
        // console.log(chartData)
        if (chartData.data.length > 0) {
          // console.log(chartData)
          this.initWorkshopChart(chartData)
        } else {
          return false
        }
        // let chartData = await this._getComparisonData('workshopComparison', postData).then(res => res.data)
        // this.initWorkshopChart(chartData)
      }
    },
    destroyed () {},
    components: {MHeader, mDate}
  }
</script>

<style lang='scss'>
  #iDefined{
    @include system-bg;
    .idefinded-main {
      color: #fff;
      width: 1800px;
      margin: 0 auto;
      .main-head{
        .divtime{
          margin-right: 80px;
        }
        .switch-single{
          margin-right: 50px;
          color: #fff;
          .ivu-radio-wrapper{
            font-size: 18px;
            margin-right: 22px;
          }
        }
        .ivu-input {
          background: #0c183e;
          color: #fff;
          border-radius: 0px;
          border: 0;
        }
        .ivu-date-picker .ivu-select-dropdown {
          background-color: #4C90FD;
        }
      }
      .main-center{
        margin-top: 20px;
        width: 100%;
        height: 400px;
        display: flex;
        .chart-card{
          padding: 16px 14px 0;
          height: 100%;
          width: 50%;
          margin-left: 10px;
          background: rgba(15, 27, 67, 0.6);
          .char-top{
            .char-title{
              float: left;
              color: rgba(125, 161, 255, 1);
              font-size: 20px;
            }
            .radio-list{
              float: right;
              margin-right: 10px;
            }
          }
          #factoryChart, #workShopChart{
            margin-top: 10px;
            height: 340px;
          }
        }
        .chart-card:first-child{
          margin-left: 0;
        }
      }
      .main-bottom{
        margin-top: 10px;
        display: flex;
        height: 400px;
        .left-wapper {
          background: rgba(15, 27, 67, 0.6);
          width: 30%;
          padding: 20px;
          font-size: 16px;

          .select-workspace {
            padding-bottom: 20px;
            color: $font-f;
          }

          .select-history {
            .select-history-text {
              height: 250px;
              background: rgba(15, 27, 67, 0.6);
              color: $font-f;
              padding: 10px 0;
              overflow: auto;

              li {
                height: 28px;
                line-height: 28px;
                padding: 0 10px;
                background-color: rgba(15, 27, 67, 0.6);
                float: left;
                width: 50%;

                span {
                  padding-right: 10px;
                }
              }
            }

            .select-history-btn {
              text-align: center;
              padding-top: 20px;
            }
          }
        }
        .right-chart{
          width: 70%;
          background: rgba(15, 27, 67, 0.6);
          margin-left: 10px;
          .char-title{
            font-size: 20px;
            color: rgba(125, 161, 255, 1);
          }
          #idefined-card{
            height: 100%;
          }
        }
      }
      .ivu-radio-group-button .ivu-radio-wrapper-checked {
        color: #2d8cf0 !important;
      }
      .ivu-radio-group-button .ivu-radio-wrapper:hover {
        position: relative;
        color: #2d8cf0 !important;
      }
      .ivu-radio-group-button .ivu-radio-wrapper{
        background: rgba(15, 27, 67, 0.5);
        border: 1px solid #2d8cf0;
        font-size: 18px;
        color: #fff;
      }
      .ivu-radio-group-button .ivu-radio-wrapper:before, .ivu-radio-group-button .ivu-radio-wrapper:after {
        background: #2d8cf0;
      }
    }
  }
  ul::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb{
    background: rgba(35, 89, 188, 1)
  }
</style>
